<template>
    <div>
        <div class="flex align-flex-start">
            <el-avatar :src="info.user.avatar" style="width:1.8vw;height:1.8vw;flex: none;"></el-avatar>
            <div class="ml-7 flex-1">
                <div class="color-text-grey font-14 mt-7">{{info.user.name}}</div>
                <div v-if="info.with_balance == '0.00'" class="mt-10 color-fff">{{info.message}}</div>
                <div v-else class="mt-10  colorFF8F3E">{{'打赏了' + info.with_balance + ($store.state.system.coin_name) }} 
                    <span style="color: #FFF;">{{(info.message?'并留言：'+info.message:'')}}</span>
                </div>

                <div class="flex align-center jus-between mt-6">
                    <div class="font-12 flex align-center">
                        <div class="color-text-grey">{{info.created_at | getTimeAgo}}</div>
                        <div @click="$emit('replyUser',info)" class="color-fff color-13 ml-6 cursor-pointer">回复</div>
                    </div>
                    <div class="flex align-center">
                        <div class="font-13 flex align-center">
                            <el-image :src="liked" @click="colseLike(info)" class="cursor-pointer" fit="cover" style="width: 0.9vw; height: 0.9vw" v-if="info.liked_count"></el-image>
                            <el-image :src="like" @click="likeFun(info)" class="cursor-pointer" fit="cover" style="width: 0.9vw; height: 0.9vw" v-else></el-image>
                            <div class="ml-4">{{info.like_count}}</div>
                        </div>
                        <!-- <div class="ml-7 position-relative">
                            <i class="el-icon el-icon-more color-999 cursor-pointer" style="font-size:1vw"></i>
                        </div>-->
                    </div>
                </div>
                <div class="mt-10" v-if="info.reply_count>0">
                    <div @click="getReplay(false)" class="font-13 color-fff cursor-pointer" v-show="!show_replay">展开{{info.reply_count}}条回复</div>
                    <div class="mt-20" v-show="show_replay">
                        <div :class="{'mt-10':key!=0}" :key="key" v-for="(value,key) in reply_data">
                            <div class="flex align-flex-start">
                                <el-avatar :src="value.user.avatar" style="width:1.8vw;height:1.8vw;flex: none;"></el-avatar>
                                <div class="flex-1">
                                    <div class="flex align-center">
                                        <div class="color-text-grey font-14 ml-7">{{value.user.name}}</div>
                                        <div class="ml-5 mr-8">
                                            <i class="el-icon el-icon-arrow-right color-999"></i>
                                        </div>
                                        <el-avatar :src="value.parent.avatar" style="width:1.8vw;height:1.8vw;flex: none;"></el-avatar>
                                        <div class="color-text-grey font-14 ml-7">{{value.parent.name}}</div>
                                    </div>
                                    <div class="mt-10">
                                        <div class="mt-10 color-fff">{{value.message}}</div>
                                        <div class="flex align-center jus-between mt-6">
                                            <div class="font-12 flex align-center">
                                                <div class="color-text-grey">{{value.created_at | getTimeAgo}}</div>
                                                <div @click="$emit('replyUser',value)" class="color-fff color-13 ml-6 cursor-pointer">回复</div>
                                            </div>
                                            <div class="flex align-center">
                                                <div class="font-13 flex align-center">
                                                    <el-image :src="liked" @click="colseLike(value)" class="cursor-pointer" fit="cover" style="width: 0.9vw; height: 0.9vw" v-if="value.liked_count"></el-image>
                                                    <el-image :src="like" @click="likeFun(value)" class="cursor-pointer" fit="cover" style="width: 0.9vw; height: 0.9vw" v-else></el-image>
                                                    <div class="ml-4">{{value.like_count}}</div>
                                                </div>
                                                <!-- <div class="ml-7">
                                                    <i class="el-icon el-icon-more color-999 cursor-pointer" style="font-size:1vw"></i>
                                                </div>-->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div @click="getReplay(true)" class="mt-10 mb-10 font-13 color-fff cursor-pointer" v-show="!nomore">加载更多...</div>
                    <div @click="show_replay=false" class="mt-10 font-13 color-fff cursor-pointer" v-show="show_replay">收起回复</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import store from '@/store'
export default {
    props: {
        info: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            like: require('@/assets/icon/video/like-grey.png'),
            liked: require('@/assets/icon/video/liked.png'),
            show_replay: false,
            reply_data: [],
            query: {
                comment_id: this.info.comment_id,
                page: 1,
                size: 10,
            },
            nomore: true,
            submitComplete: false,
        }
    },
    mounted() {
        console.log(' $store.state.system.coin_name', $store.state.system.coin_name)
    },
    methods: {
        getReplay(loadmore = false) {
            console.log(loadmore, 11111)
            if (!loadmore) {
                if (this.reply_data.length == 0) {
                    this.$request.get('/creation-comment/reply_index', this.query).then((res) => {
                        this.reply_data = res.items
                        if (res.page.total > this.reply_data.length) {
                            this.nomore = false
                        } else {
                            this.nomore = true
                        }
                        this.show_replay = true
                    })
                } else {
                    this.show_replay = true
                }
            } else {
                this.query.page++
                this.$request.get('/creation-comment/reply_index', this.query).then((res) => {
                    this.reply_data = this.reply_data.concat(res.items)
                    if (res.page.total > this.reply_data.length) {
                        this.nomore = false
                    } else {
                        this.nomore = true
                    }
                })
            }
        },
        likeFun(item) {
            if (this.submitComplete) return
            this.submitComplete = true
            this.$request
                .post('/creation-comment/like/create', { comment_id: item.comment_id })
                .then((res) => {
                    this.submitComplete = false
                    item.liked_count = 1
                    item.like_count++
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
        colseLike(item) {
            if (this.submitComplete) return
            this.submitComplete = true
            this.$request
                .del('/creation-comment/like/delete/' + item.comment_id)
                .then((res) => {
                    this.submitComplete = false
                    item.liked_count = 0
                    item.like_count--
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
    },
}
</script>

<style lang="scss" scoped>
.color-text-grey {
    color: #83818b;
}
</style>